* {
  margin: 0;
  padding: 0;
}
body {
  width: 100vw;
  height: 100vh;
  background-color: black;
}
.carousel {
  /* 大盒子位置 */
  position: relative;
  width: 130px;
  height: 195px;
  margin: 300px auto;
  /* 透视 */
  perspective: 1000px;
  /* 保持子级有自己的坐标轴 */
  transform-style: preserve-3d;
  /* 绕X旋转 */
  transform: rotateX(-15deg);
}
.carousel .pic {
  transform-style: preserve-3d;
  /* 绕Y旋转 */
  /* animation: picScroll 25s linear infinite; */
}
.carousel .pic img {
  position: absolute;
  left: 0;
  top: 0;
  width: 130px;
  box-shadow: 0 0 10px 1px white;
  /* 倒影 */
  -webkit-box-reflect: below 15px
    linear-gradient(transparent, transparent, rgba(255, 255, 255, 0.7));
  /* 过渡属性：让属性变化时都是以动画的形式改变 */
  transition: all 1s;
}

/* 鼠标 */
.carousel .pic img:hover {
  box-shadow: 0 0 15px 3px white;
}

/* 设置8个图片的位置
.carousel .pic img:nth-child(1) {
  transform: rotateY(0deg) translateZ(250px);
}
.carousel .pic img:nth-child(2) {
  transform: rotateY(45deg) translateZ(250px);
}
.carousel .pic img:nth-child(3) {
  transform: rotateY(90deg) translateZ(250px);
}
.carousel .pic img:nth-child(4) {
  transform: rotateY(135deg) translateZ(250px);
}
.carousel .pic img:nth-child(5) {
  transform: rotateY(180deg) translateZ(250px);
}
.carousel .pic img:nth-child(6) {
  transform: rotateY(225deg) translateZ(250px);
}
.carousel .pic img:nth-child(7) {
  transform: rotateY(270deg) translateZ(250px);
}
.carousel .pic img:nth-child(8) {
  transform: rotateY(315deg) translateZ(250px);
} */

/* 旋转 */
@keyframes picScroll {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
